<template>
    <Form :model="jib" label-position="top" ref="jibForm" :rules="jibRule">
        <Row :gutter="16">
            <Col span="12">
                <FormItem label="基础镜像" prop="from.image">
                    <Input v-model="jib.from.image" placeholder="openjdk:latest"></Input>
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem label="认证(可选)" class="item-inline">
                    <Select v-model="formAuth" style="width: 100px">
                        <Option value="password">password</Option>
                        <Option value="credHelper">credHelper</Option>
                    </Select>
                    <Input v-if="formAuth === 'password'" v-model="jib.from.auth.username" class="item-line-middle" style="width: calc(50% - 50px)" placeholder="username"></Input>
                    <Input v-if="formAuth === 'password'" type="password" v-model="jib.from.auth.password" class="item-line-right" style="width: calc(50% - 60px)" placeholder="password"></Input>
                    <Input v-if="formAuth === 'credHelper'" v-model="jib.from.credHelper" class="item-line-double-right" style="width: calc(100% - 100px)" placeholder="osxkeychain /secretservice /wincred /pass"></Input>
                </FormItem>
            </Col>
        </Row>
        <Row :gutter="16">
            <Col span="12">
                <FormItem label="发布镜像"  prop="to.image">
                    <Input v-model="jib.to.image" placeholder="docker.io" class="item-inline">
                        <div slot="append" style="width: 80px;text-align: left">/{{tempApp?tempApp.appInfo.appName:''}}</div>
                    </Input>
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem label="认证" class="item-inline" prop="to">
                    <Select v-model="toAuth" style="width: 100px">
                        <Option value="password">password</Option>
                        <Option value="credHelper">credHelper</Option>
                    </Select>
                    <Input v-if="toAuth === 'password'" v-model="jib.to.auth.username" class="item-line-middle" style="width: calc(50% - 50px)" placeholder="username"></Input>
                    <Input v-if="toAuth === 'password'" type="password" v-model="jib.to.auth.password" class="item-line-right" style="width: calc(50% - 60px)" placeholder="password"></Input>
                    <Input v-if="toAuth === 'credHelper'" v-model="jib.to.credHelper" class="item-line-double-right" style="width: calc(100% - 100px)" placeholder="osxkeychain /secretservice /wincred /pass"></Input>
                </FormItem>
            </Col>
        </Row>
    </Form>
</template>

<script>
    export default {
        data(){
            return {
                formAuth: 'password',
                toAuth: 'password',
                jib:{
                    from:{
                        image: 'openjdk:latest',
                        auth:{
                            username: '',
                            password: ''
                        },
                        credHelper: ''
                    },
                    to: {
                        image: '',
                        auth:{
                            username: '',
                            password: ''
                        },
                        credHelper: ''
                    }
                },
                jibRule:{
                    'from.image': [{
                        required: true, message: '基础不能为空', trigger: 'blur'
                    }],
                    'to.image': [{
                        required: true, message: '生成镜像不能为空', trigger: 'blur'
                    }],
                    'to': [{
                        required: true, message: '认证不能为空', trigger: 'blur', validator:(rule, value, callback)=>{
                            if ((this.toAuth === 'credHelper' && value.credHelper !== '') || (this.toAuth === 'password' && value.auth.username !== '' && value.auth.password !== '')) {
                                callback();
                            } else {
                                callback(new Error(rule.message));
                            }
                        }
                    }]
                }
            }
        },
        props:['tempApp'],
        created(){

        },
        methods:{
            initData(data){
                this.jib = data;
            },
            getData(){
                return new Promise((resolve)=>{
                    this.$refs['jibForm'].validate((valid)=>{
                        if (valid) {
                            resolve({
                                code: 'jib',
                                groupName: 'CI/CD by Gradle',
                                config: JSON.stringify(this.jib)
                            });
                        }
                    })
                })
            }
        }
    }
</script>

<style lang="less">
    .item-inline {
        .item-line-double-right{
            input{
                border-bottom-left-radius: 0;
                border-top-left-radius: 0;
            }
        }
    }
</style>